<template>
  <div class="serviceVehicle" v-if="userId">
    <!-- 没有车辆显示 -->
    <div class="noshowCar" v-if="noshowCar" @click="toAddCar">
      <div class="noshowCarC" >
        <img src="../../assets/image/mine/addcarg.png" alt="">
        <p>完善车辆信息让通仔更懂你~</p>
      </div>
    </div>
    <!-- 有车辆显示 -->
    <div class="showCar" v-if="!noshowCar">
      <div class="showCarTitle" @click="toMyCar">
        <div class="showCarTitleleft">
          <!-- <img src="../../assets/image/mine/carbc.png" alt=""> -->
          <img :src="allCarMessUrl+showCarMess.SICON" alt=" ">
          <p v-if="showCarMess.BRAND">{{showCarMess.BRAND+" "+showCarMess.SET+" "+showCarMess.MODEL}}</p>
        </div>
        <img src="../../assets/image/mine/switchcarg.png" alt="" @click="toMyCar">
      </div>
      <div class="showCarContent">
        <div class="noShowCarNeed" v-if="noShowCarNeed">
          <p>该车暂无保养项目,换辆车试试~</p>
        </div>
        <div class="showCarNeed" v-if="!noShowCarNeed&&indexss==2">
          <div class="showCarNeedSmall" @click="toShowCarNeedSmall">
            <div class="showNeedSmallIcon">
              <img src="../../assets/image/mine/LittleMaintain.png" alt="">
              <p>小保养</p>
            </div>
            <div class="showNeedSmallPrice">
              <p>￥{{maintain.MINMTDATA.MINMTPRICE ? maintain.MINMTDATA.MINMTPRICE : 0}}</p>
              <p>省￥{{maintain.MINMTDATA.MINMTDISCOUNTPRICE ? maintain.MINMTDATA.MINMTDISCOUNTPRICE : 0}}</p>
            </div>
          </div>
          <div class="line"></div>
          <div class="showCarNeedBig" @click="toShowCarNeedBig">
             <div class="showNeedSmallIcon">
              <img src="../../assets/image/mine/BigMaintain.png" alt="">
              <p>{{maintain.MAXMTDATA.DEPTHMTNAME}}</p>
            </div>
            <div class="showNeedSmallPrice">
              <p>￥{{maintain.MAXMTDATA.DEPTHMTNAME ? maintain.MAXMTDATA.DEPTHPRICE : 0}}</p>
              <p>省￥{{maintain.MAXMTDATA.DEPTHDISCOUNTPRICE ? maintain.MAXMTDATA.DEPTHDISCOUNTPRICE : 0}}</p>
            </div>
          </div>
        </div>
        <div class="showCarNeedOne" v-if="!noShowCarNeed&&indexss==1" @click="toShowCarNeedSmall">
          <div class="showCarNeedOneIcon">
            <img src="../../assets/image/mine/LittleMaintain.png" alt="">
          </div>
          <div class="showCarNeedOnePrice">
            <p>小保养</p>
            <div class="showCarNeedOnePricec">
              <p>￥{{maintain.MINMTDATA.MINMTPRICE}}</p>
              <p>省￥{{maintain.MINMTDATA.MINMTDISCOUNTPRICE}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Confirm} from "vux";
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name: 'serviceVehicle',
  data () {
    return {
      userId: '', // 用户的id
      noshowCar: true,//没有 我的车辆信息
      noShowCarNeed: false,// 该车暂无保养项目
      allCarMess: '', // 我的所有车辆
      allCarMessUrl: '', // 图片的url
      showCarMess: '',// 当前显示的车辆
      maintain: '', // 当前车辆的数据
      showCarMaintain: '', // 当前显示的车辆保养
      selectId: '', // 当前显示的车辆id
      indexss: 0
    }
  },
   // 计算属性
  computed: {},
  beforeCreate(){
  },
  // 创建（实例创建完成）
  created() {
    this.userId =  getCookie('loginkey');
    this.$nextTick(function () {
        // DOM 现在更新了
        // `this` 绑定到当前实例
        this.getUserCar()
      })
    this.getUserCar();
  },
  methods: {
    // 获取用户车辆
    getUserCar(){
      //  获取用户所有车辆
      this.$fetchGet('/UserWeb/getCars.action',{USER_ID:this.userId}).then(res=>{
          if(res.STATUS_CODE==1){
            // localStorage.setItem("publicUrl",this.allCarMess.CAR_LOGO_URL);
            if(res.CARS.length!=0){
              this.allCarMess=res.CARS;
              //过滤掉有'未设置'三个字的车
              for(let j=0;j<this.allCarMess.length;j++){
                if(this.allCarMess[j].BRAND=='未设置' || this.allCarMess[j].LICENCE=='未设置'){
                  this.allCarMess.splice(j,1);
                }
              }
              if(this.allCarMess.length==0){
                this.noshowCar= true;
                return;
              }
              this.allCarMessUrl = res.CAR_LOGO_URL;
              for(let i = 0; i < this.allCarMess.length; i++){
                if(this.allCarMess[i].IS_DEFAULT_CAR==1){
                  this.showCarMess = this.allCarMess[i];
                }
              }
              this.noshowCar= false;
              let CARBRANDNAME = this.toCarBrandName(this.showCarMess.BRAND,this.showCarMess.SET,this.showCarMess.MODEL)
              this.getgetMTDiscount(CARBRANDNAME)
            }else{
              this.noshowCar= true;
            }
          }
      },err=>{
        console.log(err);
      })
    },
    // 获取车辆保养信息
    getgetMTDiscount(CARBRANDNAME){
      let citys = localStorage.getItem('citys') ? localStorage.getItem('citys') : '深圳';
      // CARBRAND_NAME品牌_车系列_车型号 丰田_汉兰达_2015款 2.0T 四驱豪华版 7座"
      this.$fetchPost('/maintainWeb/getMTDiscount.action',{CARBRAND_NAME:CARBRANDNAME,CITY:citys}).then(res=>{
        if(res.STATUS_CODE==1){
          this.maintain = res;
          if(res.MINMTDATA&&res.MAXMTDATA&&res.MAXMTDATA.DEPTHMTNAME != ''){
            // 小保养 深保养都存在
            this.indexss = 2;
            this.noShowCarNeed = false;
          }else if(!res.MINMTDATA&&!res.MAXMTDATA){
            //小保养 深保养都不存在
            this.noShowCarNeed = true;
          }else if(res.MAXMTDATA.DEPTHMTNAME == ''&&!!res.MINMTDATA.MINMTDISCOUNTPRICE){
            this.indexss = 1;
            this.noShowCarNeed = false;
          }else if(res.MAXMTDATA.DEPTHMTNAME == ''&&!res.MINMTDATA.MINMTDISCOUNTPRICE){
            //小保养 深保养都不存在
            this.noShowCarNeed = true;
          }else if(!res){
            this.noShowCarNeed = true;
          }else{
            //小保养 深保养存在一个
            this.indexss = 1;
            this.noShowCarNeed = false;
          }
        }
        // console.log(res)
      })
    },
    // 添加车辆
    toAddCar(){
      let that = this
      // 获取登录的手机号
      if(!getCookie('loginkey')){
        this.$vux.confirm.show({
          title:'提示',
          content:'请先登录',
          onConfirm () {
            that.$router.push('/login');
          }
        })
        return;
      }else{
        this.userid = getCookie('loginkey')
      }
      // 跳转添加车辆,
      localStorage.setItem('from', 'mine')
      this.$router.push("/addCar");
    },
    // 切割字符串 用_代替空格
    toCarBrandName(name,series,model){
      return name + '_' + series + '_' + model
    },
    // 去我的车辆
    toMyCar(){
      this.$emit('changeC',false);//子调用父组件的方法
    },
    // 跳转智能保养 小保养
    toShowCarNeedSmall(){
      sessionStorage.removeItem('MDEPTHMTNAME');
      sessionStorage.setItem('smallMaintain', JSON.stringify(this.maintain.MINMTDATA));
      this.$router.push('/maintainHome')
    },
    // 跳转智能保养 深度保养
    toShowCarNeedBig(){
      // 跳转 传一个参数默认选择MDEPTHMTNAME 是否深度保养
      //-----------------如果提示无保养套餐，先在首页定位下-----------------------
      sessionStorage.removeItem('smallMaintain');
      sessionStorage.setItem('MDEPTHMTNAME', JSON.stringify(this.maintain.MAXMTDATA));
      this.$router.push('/maintainHome');
    }
  },
  components:{

  }
}
</script>
<style lang="less" scoped>
@import url("../../assets/css/public.less");
.serviceVehicle{
  height: 2.1rem;
  background: #fff;
  border-bottom: 0.1rem solid #ededed;
  .noshowCar{
    .noshowCarC{
      img{
        margin-top: 0.42rem;
        width: 0.6rem;
        height:0.6rem;
      }
      p{
        color: #888888;
        font-size: 0.24rem;
      }
    }
  }
  .showCar{
    .showCarTitle{
      height: 0.8rem;
      padding: 0 0.3rem;
      .borderBFu(#e1e2df);
      display: flex;
      justify-content:space-between;
      .showCarTitleleft{
        display: flex;
        align-items: center;
        img:nth-child(1){
          width: 0.44rem;
          height: 0.44rem;
          margin: 0.18rem 0.12rem 0.18rem 0;
          padding: 0;
        }
        p{
          font-size: 0.29rem;
          height: 0.44rem;
          line-height: 0.44rem;
          width: 5.6rem;
          text-align: left;
          color:#444444;
          overflow: hidden;
          white-space:nowrap;
          text-overflow:ellipsis;
        }
      }
      img{
        width: 0.56rem;
        height: 0.56rem;
        padding: 0.1rem;
        margin: 0.12rem 0 0.12rem 0.2rem;
      }
    }
    .showCarContent{
      height: 1.2rem;
      .noShowCarNeed{
        p{
          height: 1.2rem;
          line-height: 1.2rem;
          text-align: center;
          font-size: 0.28rem;
          color:#878787;
        }
      }
      .showCarNeed{
        height: 1.2rem;
        display: flex;
        .showCarNeedSmall,.showCarNeedBig{
          width: 50%;
          display: flex;
          justify-content: flex-end;
          .showNeedSmallIcon{
            height: 1.2rem;
            // width: 50%;
            // display: flex;
            font-size: 0.24rem;
            margin-right: .3rem;
            // text-align: right;
            img{
              margin-top: 0.16rem;
              width: 0.56rem;
              height: 0.56rem;
            }
            p{
              color: #666666;
              font-size: 0.24rem;
              overflow:hidden;
              text-overflow:ellipsis;
              display:-webkit-box;
              -webkit-line-clamp:1;
              -webkit-box-orient:vertical;
            }
          }
          .showNeedSmallPrice{
            width: 1.5rem;
            text-align: left;
            p:nth-child(1){
              color: #F22E2E;
              font-size: 0.27rem;
              margin-top: 0.32rem;
            }
            p:nth-child(2){
              color: #999999;
              font-size: 0.24rem;
              text-decoration: line-through;
            }
          }
        }
        .line{
          width: 1px;
          height: 0.5rem;
          background-color: #DDDDDD;
          margin-top: .35rem;
        }
      }
      .showCarNeedOne{
        display: flex;
        justify-content:center ;
        align-items:center;
        .showCarNeedOneIcon{
          height: 1.2rem;
          display: flex;
          img{
            width: 0.66rem;
            height: 0.66rem;
            margin-top: 0.27rem;
          }
        }
        .showCarNeedOnePrice{
          text-align: left;
          margin-left: 0.2rem;
          p{
            font-size: 0.29rem;
            color: #666666;
            padding-left:0.1rem;
          }
          .showCarNeedOnePricec{
            display: flex;
             p:nth-child(1){
              color: #F22E2E;
              font-size: 0.27rem;
              padding-left:0.05rem;
            }
            p:nth-child(2){
              color: #999999;
              font-size: 0.24rem;
              text-decoration: line-through;
            }
          }
        }
      }
    }
  }
}
</style>
